import{d as f,e as y,a as u,P as r,Q as c,$ as a,X as l,a5 as s,ab as d,a2 as x,a8 as v,a9 as g,R as o,S as p}from"./elementPlusModules.js";import{_ as k}from"./index.js";import"./lodashModules.js";import"./vxeTableModules.js";const m=t=>(v("data-v-21fa0d29"),t=t(),g(),t),S=m(()=>o("p",{class:"text-center demonstration"},"normal vertical layout",-1)),b={text:"2xl",justify:"center"},j=m(()=>o("p",{class:"text-center demonstration"},"card vertical layout",-1)),I={text:"2xl",justify:"center"},V=f({__name:"Vertical",setup(t){const _=y(`
<template>
  <p class="text-center demonstration">normal vertical layout</p>
  <el-carousel height="200px" direction="vertical" :autoplay="false">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 text="2xl" justify="center">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
  <p class="text-center demonstration">card vertical layout</p>
  <el-carousel
    height="400px"
    direction="vertical"
    type="card"
    :autoplay="false"
  >
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 text="2xl" justify="center">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
`);return(h,B)=>{const i=u("el-carousel-item"),n=u("el-carousel");return r(),c(s,null,[S,a(n,{height:"200px",direction:"vertical",autoplay:!1},{default:l(()=>[(r(),c(s,null,d(4,e=>a(i,{key:e},{default:l(()=>[o("h3",b,p(e),1)]),_:2},1024)),64))]),_:1}),j,a(n,{height:"400px",direction:"vertical",type:"card",autoplay:!1},{default:l(()=>[(r(),c(s,null,d(4,e=>a(i,{key:e},{default:l(()=>[o("h3",I,p(e),1)]),_:2},1024)),64))]),_:1}),x(h.$slots,"default",{html:_.value},void 0,!0)],64)}}}),D=k(V,[["__scopeId","data-v-21fa0d29"]]);export{D as default};
